<script>
export default {
  name: 'Masking',
  props: {
    closeable: {
      type: Boolean,
      default: true
    },
    value: {
      type: Boolean,
      default: false
    },
    contentClass: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    }
  },
  methods: {
    closeHandle() {
      this.$emit('input', false)
    },
    clickMask() {
      this.$emit('click')
    }
  },
  render(h) {
    const children = []
    let content = []
    if (this.$scopedSlots.default instanceof Function) {
      content = this.$scopedSlots.default()
    }
    if (!this.value) {
      return content
    }
    if (this.closeable) {
      children.push(h('svg-icon', { class: 'close-icon', props: { iconClass: 'cuowuguanbiquxiao' }, nativeOn: {
        click: e => {
          e.stopPropagation()
          this.$emit('input', false)
        }
      }}))
    }
    children.push(h('div', { class: ['content', this.contentClass], on: { click: e => e.stopPropagation() }}, content))
    return h('div', { class: 'masking', on: { click: e => {
      e.stopPropagation()
      this.$emit('click')
    } }}, children)
  }
}
</script>
<style lang="less" scoped>
.masking{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,.9);
  z-index: 999;
  .close-icon{
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 20px;
  }
  .content{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
}
</style>
